<template>
  <el-dialog title="本月得分" :visible.sync="dialogStatus.scoreFormVisible" width="30%">
    <el-form :label-position="labelPosition" label-width="80px" :model="scoreForm" :rules="rules" ref="scoreForm">
      <el-form-item label="姓名">
        <el-input v-model="scoreForm.ename"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="scoreForm.esex"></el-input>
      </el-form-item>
      <el-form-item label="学历">
        <el-input v-model="scoreForm.eeducation"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="dname">
        <el-select v-model="scoreForm.dname" placeholder="请选择" @change="changeDepartment">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职称">
        <el-input v-model="scoreForm.ejobTitle"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="scoreForm.eposition"></el-input>
      </el-form-item>
      <el-form-item label="入职时间">
        <el-input v-model="scoreForm.ejoinDate"></el-input>
      </el-form-item>
      <el-form-item label="本月得分" prop="sgrade">
        <el-input type="number" v-model="scoreForm.sgrade"></el-input>
      </el-form-item>
      <el-form-item class="form-bottom">
        <el-button class="form-btn" @click="submitChange('scoreForm',scoreForm)">保存</el-button>
        <el-button type="info" @click="closeDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'

export default {
  name: "Score",
  data() {
    //检验得分
    let checkScore = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('得分不能为空'));
      }
      setTimeout(() => {
        if (value < 0 || value > 100) {
          callback(new Error('得分在0-100分之间'));
        } else {
          callback();
        }
      }, 200);
    }
    return {
      options: [],
      labelPosition: 'right',
      value: '',
      rules: {
        dname: [{required: true, message: '请选择部门', trigger: 'change'}],
        sgrade: [{validator: checkScore, trigger: 'blur'}]
      }
    }
  },
  computed: {
    ...mapState('score', ['scoreForm', 'dialogStatus', 'preScore'])
  },
  methods: {
    ...mapActions('score', ['updateScore', 'updateScorePost']),
    ...mapMutations('score', ['changeDepartment', 'closeDialog']),
    //提交表单验证
    submitChange(scoreForm, obj) {
      this.$refs[scoreForm].validate((valid) => {
        if (valid) {
          let id = obj.eid
          let grade = obj.sgrade
          if (this.preScore === 0 || '' || null || undefined) {
            this.updateScorePost({id, grade})
          } else {
            this.updateScore({id, grade})
          }
        } else {
          return false;
        }
      })
    },
    // 拿到所有部门
    async getDepartment() {
      await this.$axios.get('/department/showDepartment/1/50')
          .then(({data}) => {
            let response = data.data
            for (let i = 0; i < response.length; i++) {
              let obj = {value: response[i].dname, label: response[i].dname}
              this.options.push(obj)
            }
          })
    },

  },
  mounted() {
    this.getDepartment()
  }
}
</script>

<style scoped>
.form-btn {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFF;
}

.form-bottom {
  padding: 20px 0;
  border-top: 1px dashed #beb8b8;
}
</style>